Vue3 入门教程 #

(一) 创建项目 #

1. 安装脚手架

   npm install -g create-vite-app
   

2. 创建项目

   create-vite-app projectName
   

3. 安装依赖

   用vscode打开项目, 运行 npm i

4. 运行项目

   npm run dev // 可以在package.json里修改
   

5. 预览项目

   用浏览器打开: http://localhost:3000

6. vscode安装vue3插件 Volar

(二) 路由配置 #

1. 安装依赖

   npm i vue-router
   

2. 创建product, my, login, demo组件

3. 创建路由

   src/router/index.js

   import { createRouter, createWebHistory } from "vue-router";
   
   const routes = [
     {
       path: "/",
       redirect: "/product/list",
     },
     {
       path: "/product",
       component: () => import("../views/product/index.vue"),
       children: [
         {
           path: "list",
           component: () => import("../views/product/list.vue"),
         },
         {
           path: "detail",
           component: () => import("../views/product/detail.vue"),
         },
       ],
     },
     {
       path: "/my",
       component: () => import("../views/my/index.vue"),
     },
     {
       path: "/login",
       component: () => import("../views/login/index.vue"),
     },
     {
       path: "/demo",
       component: () => import("../views/demo/index.vue"),
     },
   ];
   
   const router = createRouter({ 
     history: createWebHistory(),
     routes,  
   });
   
   export default router;
   
   

4. 使用路由

   main.js

   import { createApp } from "vue";
   import App from "./App.vue";
   import "./index.css";
   import router from "./router/index";
   
   const app = createApp(App);
   app.use(router);
   app.mount("#app");
   

5. 配置路由出口

   App.vue

   <template>
       <router-view></router-view> 
   </template>
   
   <script>  
   export default {
     name: 'App', 
   }
   </script>
   

(三) options api和composition api #

1. vue2使用选项式 api(options api)

2. vue3使用组合式 api(composition api)

(1) vue2项目 #

<template>
  <div>demo</div>
</template>

<script>
export default {
  data() {
    return {};
  },

  create() {},
  filter: {},
  computed: {},
};
</script>

(2) vue3项目 #

// 写法1
<template>
  <div>
      {{add()}}
  </div>
</template>

<script>
export default {
    setup() {
        const add = () => {
            return 222;
        }    

        return {
            add
        }
    }
};
</script>

// 写法2
<template>
  <div>{{msg}}</div>
</template>

<script setup>
import { ref } from "vue";
import {useRouter} from 'vue-router';
let msg = ref("hello");
const router = useRouter();
router.push('/my');
</script>

(四) 创建响应式数据(ref) #

<template>
  <div> 
      {{ count }}
      </div>
</template>

<script setup>
import { ref } from "vue";
let msg = ref("");
let count = ref(0);
let arr = ref([1,2,3])

// 修改变量的值
setTimeout(()=> {
    count.value = 100;
},2000) 
</script>

(五) 父子组件通信 #

(六) 路由跳转和传参 #

(七) 创建响应式数据(reactive) #

(八) 跨组件通信(pinia) #

业务逻辑 #

(1) 商品列表 #

1. 安装axios的依赖 npm i axios

2. 商品列表代码

   <template>
     <div class="product">
       <!-- 商品列表 -->
       <ul class="product-list">
         <li v-for="item in productList" 
             :key="item.productId" class="item">
           {{ item.masterName }}
         </li>
       </ul>
     </div>
   </template>
   
   <script setup>
   import axios from 'axios';
   import { ref, onMounted } from "vue";
   // 定义一个列表, 用来存放商品列表数据
   const productList = ref([]);
   // 声明一葛请求数据的方法
   const getProductList = async () => {
     let url = "http://huruqing.cn:3003/product/list";
     let res = await axios.get(url);
     // 存数据
     productList.value = res.data.list;
   };
   
   // 使用onMounted,onMounted函数会自动自动
   onMounted(getProductList);
   </script>